<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>

    // 事件委托:
    // 利用事件冒泡的原理,将子元素的事件委托给父(代)元素,由父(代)元素代为执行 

    // 注意: 事件委托 -> 指向向父(代)元素委托事件,元素该获取还是要正常获取的


    var catbox = document.getElementsByClassName("catbox")[0];
    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");

    catbox.onclick = function (e) {
        // this -> 绑定事件的元素
        var e = e || window.event;
        var target = e.target;

        console.log(target); //触发事件的元素(事件源)
        if (target.classList.contains("check-all")) {
            console.log("点击了全选");
            // checkAllHandler(target);
            checkAllHandler.call(target);
            getTotal();
        } else if (target.classList.contains("check-one")) {
            console.log("点击了单选");

            isAllChecked();
            getTotal();
        } else if (target.className == "add") {
            console.log("点击了加号");

            addHandler.call(target);
            getTotal();
        } else if (target.className == "reduce") {
            console.log("点击了减号");

            reduceHandler.call(target);
            getTotal();
        } else if (target.className == "delete") {
            console.log("点击了单删");
            deleteOneHandler.call(target); // 删除商品
            isAllChecked(); // 判断剩余商品是否全部被选中
            getTotal();

        } else if (target.id == "deleteAll") {
            console.log("点击了全删");
            deleteAllHandler.call(target);
            isAllChecked(); //  // 全部删除之后取消选中
            getTotal();
        }

    }


    // 第一种封装思路 => 提取target为形参
    // function checkAllHandler(target) {
    //     var status = target.checked;
    //     console.log(status);
    //     Array.from(checkOneList).forEach(checkOne => checkOne.checked = status);
    // }

    // 第二种封装思路 => 不提取target 而是将函数中的this->指向target
    function checkAllHandler() {
        var status = this.checked;
        console.log(status);
        Array.from(checkOneList).forEach(checkOne => checkOne.checked = status);
    }

    function addHandler() {
        // a. 输入框数量加1
        var countInput = this.previousElementSibling; // 加号的前一个元素 => 输入框
        var num = countInput.value; //取值
        num++; // 自增
        countInput.value = num; // 更新到页面中

        // b. 小计更新 = 单价 * 数量
        // 数量 => num
        // 单价 => 页面中找

        var parentTd = this.parentElement;
        var priceTd = parentTd.previousElementSibling;
        var subtotalTd = parentTd.nextElementSibling;

        var price = priceTd.textContent * 1;
        var subtotal = price * num;

        // 小数运算可能会失精度 => 处理
        subtotalTd.textContent = subtotal.toFixed(2);


        //  减号按钮 "-"显示
        var reduce = countInput.previousElementSibling; // 对应的减号
        reduce.textContent = "-";

    }

    function reduceHandler() {
        console.log(this); // 被点击的减号

        // a. 输入框数量减1
        var countInput = this.nextElementSibling; // 加号的前一个元素 => 输入框
        var num = countInput.value; //取值 
        // c. 减之前判断,如果数量已经是1 => 不能减
        if (num == 1) {
            return false;  // 后续代码不在执行
        }

        num--; // 自减   

        // d. 减之后判断,如果数量已经是1 => 减号按钮"-"小时(2切为1的瞬间)
        if (num == 1) {  // 2切1的瞬间
            this.textContent = "";
        }


        countInput.value = num; // 更新到页面中


        // b. 小计更新 = 单价 * 数量
        // 数量 => num
        // 单价 => 页面中找

        var parentTd = this.parentElement;
        var priceTd = parentTd.previousElementSibling;
        var subtotalTd = parentTd.nextElementSibling;

        var price = priceTd.textContent * 1;
        var subtotal = price * num;

        // 小数运算可能会失精度 => 处理
        subtotalTd.textContent = subtotal.toFixed(2);
    }

    function deleteOneHandler() {
        if (confirm("是否删除该商品?")) {
            var tr = this.parentElement.parentElement;
            console.log(tr);
            tr.remove();

            // 每次删除商品之后 -> 剩余的商品有可能全部被选中 => 全选框反选
            // a. checkOneList 会随着页面check-one的增加或减少自动更新集合
            // b. 只需要再次判断剩余的商品是否全部被选中
            // console.log(checkOneList);



        }
    }

    function deleteAllHandler() {
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j]; // 找到每一个单选
            if (checkOne.checked) { // 如果单选被选中
                var tr = checkOne.parentElement.parentElement;
                tr.remove();
                j--;
            }
        }

    }

    function isAllChecked() {
        var flag = Array.from(checkOneList).every(item => item.checked);
        //  checkOneList.length == 0 => 集合为空(没有商品)
        checkAll.checked = checkOneList.length == 0 ? false : flag;
    }

    // 结算
    // 找到所有被选中的商品 => 对 数量 和 小计 分别累加并输出到页面指定位置
    // 1.  找到所有被选中的商品  (checkOne -> 商品)
    // 2.  对应 被选中的商品  => 找到 数量和小计 => 累加
    function getTotal() {
        var sum = 0;
        var allPrice = 0;

        for (var j = 0; j < checkOneList.length; j++) {
            var item = checkOneList[j];
            if (item.checked) { // 从所有单选中 -> 找到被选中的
                var tr = item.parentElement.parentElement;
                var countInput = tr.getElementsByClassName("count-input")[0];
                var subtotalTd = tr.getElementsByClassName("subtotal")[0];

                var num = countInput.value * 1;
                var subtotal = subtotalTd.textContent * 1;

                sum += num;
                allPrice += subtotal;

            }
        }

        // 全部累加完毕 -> 更新到页面
        selectedTotal.textContent = sum;
        priceTotal.textContent = allPrice.toFixed(2);

    }

</script>

</html>